.el-pagination {
  margin: 16px 0;

  .el-pagination__rightwrapper {
    display: grid;
    justify-items: flex-end;

    .el-pagination__total {
      grid-column: 1/2;
      order: 1;
    }

    .el-pagination__sizes {
      grid-column: 1/2;
      order: 2;
    }

    .btn-prev {
      grid-column: 1/2;
      order: 3;
    }

    .el-pager {
      grid-column: 1/2;
      order: 4;
    }

    .btn-next {
      grid-column: 1/2;
      order: 5;
    }

    .el-pagination__jump {
      grid-column: 1/2;
      order: 6;
    }
  }
}

@media all and (max-width: 576px) {
  .el-pagination {
    .el-pagination__rightwrapper {
      grid-template-columns: repeat(1, 1fr);
      grid-template-rows: repeat(6, 32px);
    }
  }
}

@media all and (min-width: 576px) and (max-width: 768px) {
  .el-pagination {
    .el-pagination__rightwrapper {
      grid-template-columns: auto 144px;
      grid-template-rows: repeat(5, 32px);

      .el-pagination__total {
        grid-column: 1/2;
      }

      .el-pagination__sizes {
        grid-column: 2/3;
      }

      .btn-prev {
        grid-column: 1/3;
      }

      .el-pager {
        grid-column: 1/3;
      }

      .btn-next {
        grid-column: 1/3;
      }

      .el-pagination__jump {
        grid-column: 1/3;
      }
    }
  }
}

@media all and (min-width: 768px) and (max-width: 992px) {
  .el-pagination {
    .el-pagination__rightwrapper {
      grid-template-columns: repeat(2, auto) 42px;
      grid-template-rows: repeat(4, 32px);

      .el-pagination__total {
        grid-column: 1/2;
      }

      .el-pagination__sizes {
        grid-column: 2/3;
      }

      .btn-prev {
        grid-column: 3/4;
      }

      .el-pager {
        grid-column: 1/4;
      }

      .btn-next {
        grid-column: 1/4;
      }

      .el-pagination__jump {
        grid-column: 1/4;
      }
    }
  }
}

@media all and (min-width: 992px) and (max-width: 1200px) {
  .el-pagination {
    .el-pagination__rightwrapper {
      grid-template-columns: repeat(4, auto);
      grid-template-rows: repeat(3, 32px);

      .el-pagination__total {
        grid-column: 1/2;
      }

      .el-pagination__sizes {
        grid-column: 2/3;
      }

      .btn-prev {
        grid-column: 3/4;
      }

      .el-pager {
        grid-column: 4/5;
      }

      .btn-next {
        grid-column: 1/5;
      }

      .el-pagination__jump {
        grid-column: 1/5;
      }
    }
  }
}

@media all and (min-width: 1200px) and (max-width: 1400px) {
  .el-pagination {
    .el-pagination__rightwrapper {
      grid-template-columns: repeat(4, auto) 42px;
      grid-template-rows: repeat(2, 32px);

      .el-pagination__total {
        grid-column: 1/2;
      }

      .el-pagination__sizes {
        grid-column: 2/3;
      }

      .btn-prev {
        grid-column: 3/4;
      }

      .el-pager {
        grid-column: 4/5;
      }

      .btn-next {
        grid-column: 5/6;
      }

      .el-pagination__jump {
        grid-column: 1/6;
      }
    }
  }
}

@media all and (min-width: 1400px) {
  .el-pagination {
    .el-pagination__rightwrapper {
      grid-template-columns: repeat(5, auto) 130px;
      grid-template-rows: repeat(1, 32px);

      .el-pagination__total {
        grid-column: 1/2;
      }

      .el-pagination__sizes {
        grid-column: 2/3;
      }

      .btn-prev {
        grid-column: 3/4;
      }

      .el-pager {
        grid-column: 4/5;
      }

      .btn-next {
        grid-column: 5/6;
      }

      .el-pagination__jump {
        grid-column: 6/7;
      }
    }
  }
}
